import React, { PureComponent } from 'react';
import { Toast, Dropdown, CheckList, Image } from 'antd-mobile';
import { DeleteOutline, LeftOutline } from 'antd-mobile-icons';
import "../styles/Search.scss"
import { pro_hotword, searchlist } from "../api/index"
import { logDOM } from '@testing-library/react';

class Search extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            list1: [],
            list2: [],
            searchcode: [],
            searchlist: [],
            isshow: true,
            min: '',
            max: ''
        }
    }
    valeuchange(e) {
        this.setState({ searchcode: e.target.value })
    }
    // 组件挂载完成
    async componentDidMount() {
        let res = await pro_hotword();
        this.setState({ list2: res.data.data })
        // 如果localStorage里有searchlist属性
        if (localStorage.getItem('searchlist')) {
            this.setState({ list1: (JSON.parse(localStorage.getItem('searchlist'))) })
        } else {
            localStorage.setItem('searchlist', '')
        }
    }
    // 点击搜索
    async search() {
        this.setState({ isshow: false });
        if (this.state.searchcode.length != 0) {
            // console.log(this.state.searchcode);
            this.setState({ list1: [...this.state.list1, this.state.searchcode] }, () => {
                localStorage.setItem('searchlist', JSON.stringify(this.state.list1))
            })
            let res = await searchlist({ keyword: this.state.searchcode });
            // console.log(res.data.data)
            this.setState({ searchlist: res.data.data });
        }
        else {
            Toast.show({
                content: '请输入搜索内容',
                position: 'top',
            })
        }
    }
    //快速搜索
    async fast(item) {
        this.setState({ isshow: false });
        let res = await searchlist({ keyword: item });
        // console.log(res.data.data)
        this.setState({ searchlist: res.data.data, searchcode: item });
    }
    // 点击清空历史记录
    kong() {
        this.setState({ list1: [] })
        localStorage.setItem('searchlist', '')
    }
    goGood(id) {
        this.props.history.push({ pathname: '/good', state: { id } });
    }
    doSort(value) {
        console.log(value[0]);
        if (value[0] == 'B') {
            let ab = JSON.parse(JSON.stringify(this.state.searchlist))
            ab.sort(function (a, b) {
                return a.originprice - b.originprice
            })
            console.log(ab)
            this.setState({ searchlist: ab })
        } else if (value[0] == 'C') {
            let ba = JSON.parse(JSON.stringify(this.state.searchlist))
            ba.sort((a, b) => {
                return b.originprice - a.originprice
            })
            console.log(ba)
            this.setState({ searchlist: ba })
        }
    }
    //自由输入价格区间
    pic(e){
        this.setState({[e.target.name]:e.target.value})
        console.log(e.target);
        // console.log(this.state.min);
        // console.log(this.state.max -0);
    }
    render() {
        return (
            <div className='search'>
                <div className='header'>
                    <div className="back">
                        <span className='s1' onClick={() => { this.state.isshow ? this.props.history.go(-1) : this.setState({ isshow: true }) }}>＜</span>
                    </div>
                    <input type="text" placeholder='华为手机' value={this.state.searchcode} onChange={(e) => { this.valeuchange(e) }} />
                    <div className="btn">
                        <span className='s2' onClick={() => this.search()}>搜索</span>
                    </div>
                </div>
                <div className={this.state.isshow ? "info" : "info hide"}>
                    <h4>最近搜索 <span onClick={() => { this.kong() }}><DeleteOutline /></span></h4>
                    <div className="lately">
                        {
                            this.state.list1 && this.state.list1.map((item, index) => {
                                return (
                                    <span onClick={() => { this.fast(item) }} className="item" key={index}>{item}</span>
                                )
                            })
                        }
                    </div>
                    <h4>热门搜索</h4>
                    <div className="hot">
                        {
                            this.state.list2.map((item, index) => {
                                return (
                                    <span onClick={() => { this.fast(item.keyword) }} className="item" key={index}>{item.keyword}</span>
                                )
                            })
                        }
                    </div>
                </div>
                <div className={this.state.isshow ? "list" : "list show"}>
                    <Dropdown>
                        <Dropdown.Item key='sorter' title='排序'>
                            <div style={{ padding: 12 }}>
                                <CheckList onChange={(value) => { this.doSort(value) }} defaultValue={['A']} style={{ "--font-size": "12px" }}>
                                    <CheckList.Item value='A'>全部商品</CheckList.Item>
                                    <CheckList.Item value='B'>价格升序</CheckList.Item>
                                    <CheckList.Item value='C'>价格降序</CheckList.Item>
                                </CheckList>
                            </div>
                        </Dropdown.Item>
                        <Dropdown.Item key='bizop' title='价格筛选'>
                            <div style={{ padding: 12 }}>
                                <div className="screen">
                                    <div className="ipt">
                                        <input type="text" placeholder='最低价格' name='min' value={this.state.min} onChange={(e) => { this.pic(e) }} />
                                        <input type="text" placeholder='最高价格' name='max' value={this.state.max} onChange={(e) => { this.pic(e) }} />
                                    </div>
                                    <div className="btn">确认</div>
                                </div>
                            </div>
                        </Dropdown.Item>
                    </Dropdown>
                    <div className="goodlist">
                        {
                            this.state.searchlist ?
                                this.state.searchlist.map((item, index) => {
                                    return (
                                        <div className="item" key={index} onClick={() => { this.goGood(item.proid) }}>
                                            <div className="pic">
                                                {
                                                    (item.img1 && item.img2 && item.banners) ?
                                                        <img src={item.img1 || item.img2 || item.banners} alt="" />
                                                        :
                                                        <Image src='/404' width={100} height={100} />
                                                }
                                            </div>
                                            <div className="text">
                                                <div className="name">{item.proname}</div>
                                                <div className="price">￥{item.originprice}</div>
                                            </div>
                                        </div>
                                    )
                                })
                                :
                                <div className="null">没有这件商品哦~~</div>
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Search;